<template>
  <div class="peiJianSort">
    <div class="sousuo">
      <el-button type="primary" size="large" @click="peiJianSortAction"
        >新增配件分类</el-button
      >
      <el-input
        v-model="search"
        :prefix-icon="Search"
        size="large"
        @clear="peijian_typeIndex()"
        clearable
        style="width: 240px; margin: 0 0.5rem"
        placeholder="请输入搜索内容"
      />
      <el-button
        type="primary"
        :icon="Search"
        plain
        @click="peijian_typeIndex()"
        size="large"
        >搜索</el-button
      >
    </div>
    <el-dialog
      :title="peiJianSortTitle"
      v-model="peiJianSortDialog"
      width="50%"
      center
    >
      <el-form :model="ruleForm" label-width="100px">
        <el-form-item label="配件分类名">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入配件分类名称"
            size="large"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input
            v-model="ruleForm.bz"
            type="textarea"
            placeholder="请输入备注信息"
            :autosize="true"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-checkbox v-model="status" size="large" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{ background: '#f7f8fa' }"
    >
      <el-table-column type="index" width="50" align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        label="配件分类名称"
        width="150"
        align="center"
      />
      <el-table-column
        prop="status_title"
        label="状态"
        width="100"
        align="center"
      />
      <el-table-column prop="bz" label="备注" align="center" />
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleSeleUserId(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="deleteActionSele(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="currentPageChange"
      :current-page="currentPage"
      :page-sizes="[10, 15]"
      :page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle"
      style="margin-top: 0.5rem"
    >
    </el-pagination>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

const search = ref("");
const loading = ref(false);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totle = ref(0);
const peiJianSortDialog = ref(false);
const peiJianSortTitle = ref("");
const peiJianSortSaveType = (ref < number) | (null > null); //1 新增 2 修改
const status = ref(true);

const ruleForm = reactive({
  id: "",
  title: "", //公司名称
  bz: "", //备注信息
});

onMounted(() => {
  peijian_typeIndex();
});
// 配件分类类型列表
const peijian_typeIndex = async () => {
  loading.value = true;
  console.log("配件分类类型列表");
  loading.value = false;
};
// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  peijian_typeIndex();
};
// 当前页
const currentPageChange = (val) => {
  currentPage.value = val;
  peijian_typeIndex();
};
// 新增配件分类
const peiJianSortAction = () => {
  peiJianSortTitle.value = "新增配件分类";
  peiJianSortSaveType.value = 1;
  peiJianSortDialog.value = true;
  Object.keys(ruleForm).forEach((key) => {
    // @ts-ignore
    ruleForm[key] = "";
  });
};
// 编辑
const handleSeleUserId = async (scope) => {
  peiJianSortSaveType.value = 2;
  peiJianSortTitle.value = "修改配件分类信息";
  peiJianSortDialog.value = true;
};
// 删除
const deleteActionSele = (scope) => {
  ElMessageBox.confirm("此操作将永久删除该配件分类, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
        peijian_typeIndex();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 提交
const submitForm = async (item) => {
  if (peiJianSortSaveType.value == 1) {
      peiJianSortDialog.value = false;
      peijian_typeIndex();
      ElMessage.success("新增配件分类成功");
  }
  if (peiJianSortSaveType.value == 2) {
      peiJianSortDialog.value = false;
      peijian_typeIndex();
      ElMessage.success("修改配件分类成功");
  }
};
</script>

<style lang="less" scoped>
.peiJianSort {
  // padding: 1rem;
  // border: 1px solid #ebeef5;
  background-color: white;
  // margin-top: 1rem;
  margin: 1rem;
  padding: 1rem;

  .sousuo {
    margin-bottom: 0.5rem;
  }
}
</style>